<template>
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="3"><div class="header-left"><span class="iconfont">&#xe624;</span></div></el-col>
        <el-col :span="16"><div class="header-middle"><span class="iconfont">&#xe632;</span>请输入城市/景点</div></el-col>
        <el-col :span="5">
          <router-link to="/city">
            <div class="header-right">{{ this.$store.state.city }}<span class="iconfont">&#xe7ff;</span></div>
          </router-link>
        </el-col>
      </el-row>
    </div>
</template>

<script>
export default {
  name: 'HomeHeader'
  // props: {
  //   city: String
  // }
}
</script>

<style lang="stylus" scoped>
.header
  height : 43px
  line-height : 43px
  background : #00bcd4
  color : #fff
  .header-middle
    background: #fff
    color: #999
    height: 32px
    margin-top: 5px
    border-radius: 3px
    line-height: 32px
    padding-left: 5px
</style>
